<template>
  <div class="marketing">
    <div class="loading"
         v-loading="loading"
         :element-loading-text="$t('public.loadingText')"
         v-if="loading">
    </div>
    <div v-if="!loading">
      <div class="prompt">
        {{$t('market.prompt')}}
     </div>
      <div class="sit-title">
        <span class="name">{{$t('market.dataOverview')}}</span>
        <span class="refresh" @click.stop="refresh"><i class= "iconfont icon-shuaxin"></i></span>
      </div>
      <div class="filter">
        <el-dropdown trigger="click" @command="handleCommandTime" size="small">
          <span class="el-dropdown-link">
             <i class= "iconfont icon-shaixuan"></i><span class="filter-name">{{filterTimeName}}</span><i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <span class="filter-date">{{$t('market.timeLimit')}}{{filterTime}}</span><span class="time" style="padding-left: 10px">{{$t('market.updateTime')}}{{freshTime}}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in time1" :command="item.type">{{item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-row class="situation-fir">
        <el-col :span="8" class="spacing margin-b-15">
          <dataSituation :name="$t('market.pv')"
                         :tip="$t('market.pvTip')"
                         :time="time"
                         :situation="situation.pv"></dataSituation>
        </el-col>
        <el-col :span="8" class="spacing margin-b-15">
          <dataSituation :name="$t('market.uv')"
                         :situation="situation.uv"
                         :time="time"
                         :tip="$t('market.uvTip')"></dataSituation>
        </el-col>
        <el-col :span="8" class="margin-b-15">
          <dataSituation :name="$t('market.dialogNums')"
                         :situation="situation.dialogNums"
                         :time="time"
                         :tip="$t('market.dialogNumsTip')"></dataSituation>
        </el-col>
      </el-row>
      <el-row class="situation-sec">
        <el-col :span="8" class="spacing margin-b-15">
          <dataSituation :name="$t('market.visitorICNums')"
                         :situation="situation.visitorICNums"
                         :time="time"
                         :tip="$t('market.visitorICNumsTip')"></dataSituation>
        </el-col>
        <el-col :span="8" class="spacing margin-b-15">
          <dataSituation :name="$t('market.customerSINums')"
                         :situation="situation.customerSINums"
                         :time="time"
                         :tip="$t('market.customerSINumsTip')"></dataSituation>
        </el-col>
        <el-col :span="8" class="margin-b-15">
          <dataSituation :name="$t('market.effectDialNums')"
                         :situation="situation.effectDialNums"
                         :time="time"
                         :tip="$t('market.effectDialNumsTip')"></dataSituation>
        </el-col>
      </el-row>
      <el-row class="situation-thir">
        <el-col :span="5" class="spacing">
          <dataInterpretation
            :tip="$t('market.clickRateFormula')"
            :content="clickRate"
            :time="time"
            :name="$t('market.clickRate')"></dataInterpretation>
        </el-col>
        <el-col :span="5" class="spacing">
          <dataInterpretation
            :content="conversionRate"
            :time="time"
            :tip="$t('market.conversionRateFormula')"
            :name="$t('market.conversionRate')"></dataInterpretation>
        </el-col>
        <el-col :span="4" class="spacing">
          <dataInterpretation
            :content="connectedRate"
            :time="time"
            :tip="$t('market.connectedRateFormula')"
            :name="$t('market.connectedRate')"></dataInterpretation>
        </el-col>
        <el-col :span="5" class="spacing">
          <dataInterpretation
            :content="inviteRate"
            :time="time"
            :tip="$t('market.inviteRateFormula')"
            :name="$t('market.inviteRate')"></dataInterpretation>
        </el-col>
        <el-col :span="5">
          <dataInterpretation
            :content="requestRate"
            :time="time"
            :tip="$t('market.requestRateFormula')"
            :name="$t('market.requestRate')"></dataInterpretation>
        </el-col>
      </el-row>
      <div class="sit-title"><span class="name">{{$t('market.dataInterpretation')}}</span>{{$t('market.interpTip')}}</div>
      <el-row class="inter-fir inter-box margin-b-15">
        <el-col :span="24">
          <div class="excellent">
            <div class="excellent-import" v-if="keywordAnalysis.flag"><div class="text1">{{$t('market.focus')}}</div><div class="text2">{{$t('market.attention')}}</div></div>
            <div class="excellent-good" v-else><div class="text1">{{$t('market.good')}}</div></div>
          </div>
          <div class="int-content">
            <div class="interp-title">{{$t('market.keywordAnalysis')}}</div>
            <div class="interp-content">
              <div v-text="keywordAnalysis.text"></div>
              <div>{{$t('market.keyAnalyFor')}}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="inter-sec inter-box margin-b-15">
        <el-col :span="24">
          <div class="excellent">
            <div class="excellent-import" v-if="trafficAnalysis.flag"><div class="text1">{{$t('market.focus')}}</div><div class="text2">{{$t('market.attention')}}</div></div>
            <div class="excellent-good" v-else><div class="text1">{{$t('market.good')}}</div></div>
          </div>
          <div class="int-content">
            <div class="interp-title">{{$t('market.trafficAnalysis')}}</div>
            <div class="interp-content">
              <div v-text="trafficAnalysis.text"></div>
              <div>{{$t('market.flowAnalyFor')}}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="inter-sec inter-box margin-b-15">
        <el-col :span="24">
          <div class="excellent">
            <div class="excellent-import" v-if="sessionAnalysis.flag"><div class="text1">{{$t('market.focus')}}</div><div class="text2">{{$t('market.attention')}}</div></div>
            <div class="excellent-good" v-else><div class="text1">{{$t('market.good')}}</div></div>
          </div>
          <div class="int-content">
            <div class="interp-title">{{$t('market.sessionAnalysis')}}</div>
            <div class="interp-content">
              <div v-text="sessionAnalysis.text"></div>
              <div>{{$t('market.dialogFor')}}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="inter-thir margin-b-15">
        <el-col :span="24">
          <div class="excellent">
            <div class="excellent-import" v-if="pageAnalysis.flag"><div class="text1">{{$t('market.focus')}}</div><div class="text2">{{$t('market.attention')}}</div></div>
            <div class="excellent-good" v-else><div class="text1">{{$t('market.good')}}</div></div>
          </div>
          <div class="int-content">
            <div class="interp-title">{{$t('market.pageAnalysis')}}</div>
            <div class="interp-content">
              <div v-text="pageAnalysis.text"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import dataSituation from './base/dataSituation.vue'
  import dataInterpretation from './base/dataInterpretation.vue'
  import {deepClone} from '@/utils/m7Utils'
  const initAttr = {
    currentCount: 0,
    compareCount: 0,
    averageCount: 0,
    wapCount: 0,
    comparePer: 0
  }
  export default {
    name: 'marketing',
    data () {
      return {
        loading: true,
        freshTime: '',
        time1: [
          { type: 'today', name: this.$t('webchat.today') },
          { type: 'week', name: this.$t('market.lastWeek') },
          { type: 'month', name: this.$t('market.lastMonth') }
        ],
        clickRate: {
          clickRatePer: 0,
          averageCountPer: 0,
          compCountPer: 0
        },
        conversionRate: {
          clickRatePer: 0,
          averageCountPer: 0,
          compCountPer: 0
        },
        connectedRate: {
          clickRatePer: 0,
          averageCountPer: 0,
          compCountPer: 0
        },
        inviteRate: {
          clickRatePer: 0,
          averageCountPer: 0,
          compCountPer: 0
        },
        requestRate: {
          clickRatePer: 0,
          averageCountPer: 0,
          compCountPer: 0
        },
        situation: {
          pv: deepClone(initAttr),
          uv: deepClone(initAttr),
          dialogNums: deepClone(initAttr),
          visitorICNums: deepClone(initAttr),
          customerSINums: deepClone(initAttr),
          effectDialNums: deepClone(initAttr)
        },
        situation1: {
          pv: deepClone(initAttr),
          uv: deepClone(initAttr),
          dialogNums: deepClone(initAttr),
          visitorICNums: deepClone(initAttr),
          customerSINums: deepClone(initAttr),
          effectDialNums: deepClone(initAttr)
        },
        keywordAnalysis: {},
        sessionAnalysis: {},
        pageAnalysis: {},
        trafficAnalysis: {},
        time: 'today',
        filterTime: '',
        pvUvSwitch: false
      }
    },
    computed: {
      filterTimeName () {
        let that = this
        return this.time1.filter(val => {
          return val.type === that.time
        })[0].name
      }
    },
    components: {
      dataSituation,
      dataInterpretation
    },
    methods: {
      getFormatDateTime (date, flag) {
        let year = date.getFullYear()
        let month = date.getMonth()
        let day = date.getDate()
        let hour = date.getHours()
        let minites = date.getMinutes()
        let second = date.getSeconds()
        month = month + 1 > 9 ? month + 1 : '0' + (month + 1)
        day = day > 9 ? day : '0' + day
        hour = hour > 9 ? hour : '0' + hour
        minites = minites > 9 ? minites : '0' + minites
        second = second > 9 ? second : '0' + second
        if (flag) {
          return year + '-' + month + '-' + day + ' ' + hour + ':' + minites + ':' + second
        } else {
          return year + '-' + month + '-' + day
        }
      },
      handleCommandTime (command) {
        this.time = command
        const date1 = new Date()
        const start = new Date()
        const end1 = new Date()
        if (this.time === 'week') {
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          end1.setTime(date1.getTime() - 3600 * 1000 * 24 * 1)
          this.filterTime = this.getFormatDateTime(start) + ' ----- ' + this.getFormatDateTime(end1)
          console.log(this.filterTime)
        } else if (this.time === 'month') {
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          end1.setTime(date1.getTime() - 3600 * 1000 * 24 * 1)
          this.filterTime = this.getFormatDateTime(start) + ' ----- ' + this.getFormatDateTime(end1)
        } else {
          this.filterTime = this.getFormatDateTime(start)
        }
        this.initData()
      },
      refresh () {
        this.initData()
      },
      initData () {
        this.loading = true
        let p1 = this.$store.dispatch('querySitation', {dateType: this.time, account: this.$store.state.session.user.account})
        let p2 = this.$store.dispatch('queryInterpretationReport', {account: this.$store.state.session.user.account})
        Promise.all([p1, p2]).then(([resp1, resp2]) => {
          if (resp1 && resp1.success && resp2 && resp2.success) {
            this.freshTime = this.getFormatDateTime(new Date(), true)
            let _obj = {
              pv: {},
              uv: {},
              dialogNums: {},
              visitorICNums: {},
              customerSINums: {},
              effectDialNums: {}
            }
            for (let key in resp1.situation) {
              this.situation1[key] = resp1.situation[key]
              _obj[key] = resp1.situation[key]
            }
            this.loading = false
            this.handleSituate(_obj)
            this.transrHandleRate()
            let _obj2 = resp2.interpretation
            this.handleInterData(_obj2)
          }
        })
      },
      handlePageAn (obj) {
        let _page = ''
        if (obj.pageAnalysis.list.length !== 0) {
          for (let i in obj.pageAnalysis.list) {
            _page += this.$t('market.pageCenter', {_id: obj.pageAnalysis.list[i]._id, pageMin: obj.pageAnalysis.list[i].averageTimeLength < 60 ? 0 : Math.floor(obj.pageAnalysis.list[i].averageTimeLength / 60), pageSe: obj.pageAnalysis.list[i].averageTimeLength % 60})
          }
        }
        let _pageItem = {
          flag: false,
          text: '',
          list: obj.pageAnalysis.list,
          count: obj.pageAnalysis.count,
          todayMin: obj.pageAnalysis.todayLoadTimeLength < 60 ? 0 : Math.floor(obj.pageAnalysis.todayLoadTimeLength / 60),
          todaySe: obj.pageAnalysis.todayLoadTimeLength % 60,
          decMin: obj.pageAnalysis.decLoadTimeLength < 60 ? 0 : Math.floor(obj.pageAnalysis.decLoadTimeLength / 60),
          decSe: obj.pageAnalysis.decLoadTimeLength % 60,
          _page: _page
        }
        let text1 = ''
        if (obj.pageAnalysis.decLoadTimeLength < 0) {
//          text1 = `相比昨日减少${Math.abs(_pageItem.decMin)}分${Math.abs(_pageItem.decSe)}秒`
          text1 = this.$t('market.decline', {min: Math.abs(_pageItem.decMin), dec: Math.abs(_pageItem.decSe)})
        } else {
//          text1 = `相比昨日增加${_pageItem.decMin}分${_pageItem.decSe}秒`
          text1 = this.$t('market.comRise', {min: _pageItem.decMin, dec: _pageItem.decSe})
        }
        if ((_pageItem.list.length === 0) && (obj.pageAnalysis.count !== 0) && (obj.pageAnalysis.decLoadTimeLength > 0)) {
          _pageItem.flag = false
          _pageItem.text = this.$t('market.pageGood', {todayMin: _pageItem.todayMin, todaySe: _pageItem.todaySe, text1: text1})
        } else {
          _pageItem.flag = true
          let _page = ''
          for (let i in _pageItem.list) {
            _page += this.$t('market.pageCenter', {_id: _pageItem.list[i]._id, pageMin: _pageItem.list[i].averageTimeLength < 60 ? 0 : Math.floor(_pageItem.list[i].averageTimeLength / 60), pageSe: _pageItem.list[i].averageTimeLength % 60})
          }
          console.log(obj.pageAnalysis.list)
          if (obj.pageAnalysis.list.length !== 0) {
            _pageItem.text = this.$t('market.pageIm', {todayMin: _pageItem.todayMin, todaySe: _pageItem.todaySe, text1: text1, _page: _page})
          } else {
            _pageItem.text = this.$t('market.pageIm11', {todayMin: _pageItem.todayMin, todaySe: _pageItem.todaySe, text1: text1, _page: _page})
          }
        }
        if (this.pvUvSwitch === true) {
          _pageItem.text = this.$t('market.pvUvSwitchTip')
        }
        this.pageAnalysis = _pageItem
      },
      handleSess (obj) {
        let _obj = {
          count: obj.count,
          flag: false,
          text: ''
        }
        if (obj.count !== 0 && (!obj.proportion)) {
          _obj.flag = false
          _obj.text = this.$t('market.dialogGood', {count: obj.count, businessOpportunityCount: obj.list[0].businessOpportunityCount, visitorInviteSessionCount: obj.list[0].visitorInviteSessionCount, inviteSessionCount: obj.list[0].inviteSessionCount})
        } else {
          _obj.flag = true
          if (obj.count === 0 && (!obj.proportion)) {
            _obj.text = this.$t('market.dialogIm1', {count: obj.count, businessOpportunityCount: obj.list[0].businessOpportunityCount, visitorInviteSessionCount: obj.list[0].visitorInviteSessionCount, inviteSessionCount: obj.list[0].inviteSessionCount})
          } else {
            _obj.text = this.$t('market.dialogIm', {count: obj.count, businessOpportunityCount: obj.list[0].businessOpportunityCount, visitorInviteSessionCount: obj.list[0].visitorInviteSessionCount, inviteSessionCount: obj.list[0].inviteSessionCount})
          }
        }
        this.sessionAnalysis = _obj
      },
      handeKeyWord (obj) {
        let _obj = {
          list: obj.list,
          count: obj.count,
          flag: false,
          text: ''
        }
        let id1 = ''
        if (obj.list.length !== 0) {
          for (let i in obj.list) {
            id1 += obj.list[i]._id + '、'
          }
          id1 = id1.substr(0, id1.length - 1)
        }
        if (obj.list.length === 0 && obj.count !== 0) {
          _obj.flag = false
          _obj.text = this.$t('market.keyAnalyGood', {count: _obj.count})
        } else {
          _obj.flag = true
          if (obj.list.length !== 0) {
            _obj.text = this.$t('market.keyAnalyIm', {count: _obj.count, text: id1})
          } else {
            _obj.text = this.$t('market.keyAn0', {count: _obj.count})
          }
        }
        if (this.pvUvSwitch === true) {
          _obj.text = this.$t('market.pvUvSwitchTip')
        }
        this.keywordAnalysis = _obj
      },
      handTraffic (obj) {
        let _obj = {
          flag: false,
          count: obj.count,
          text: '',
          list: obj.list,
          totalList: obj.list
        }
//        低于平均值
        let avrage = ''
        if (obj.list.length !== 0) {
          for (let i in obj.list) {
            avrage += this.$t('market.' + obj.list[i]._id) + '、'
          }
          avrage = avrage.substr(0, avrage.length - 1)
        }
//        渠道的uv数
        let str2 = ''
        if (obj.totalList.length !== 0) {
          for (let i in obj.totalList) {
            let _item = {
              name: this.$t('market.' + obj.totalList[i]._id),
              businessOpportunityCount: obj.totalList[i].businessOpportunityCount,
              userVisitCount: obj.totalList[i].userVisitCount
            }
            str2 += this.$t('market.flow2', {name: _item.name, businessOpportunityCount: _item.businessOpportunityCount, userVisitCount: _item.userVisitCount})
          }
          str2 = str2.substr(0, str2.length - 1)
        }
//        转换率低于10%
        let str3 = ''
        if (obj.conversionRate) {
          str3 = this.$t('market.flow3')
        } else {
          str3 = this.$t('market.flow4')
        }
        if (_obj.list.length === 0 && (!_obj.conversionRate) && _obj.count !== 0) {
          _obj.flag = false
          _obj.text = this.$t('market.flowAnalyGood', {count: _obj.count, str2: str2})
        } else {
          _obj.flag = true
          if (_obj.conversionRate && _obj.list.length !== 0) {
            _obj.text = this.$t('market.flowAnalyIm', {count: _obj.count, str1: this.$t('market.flow1', {avrage: avrage}), str2: str2, str3: str3})
          } else if (_obj.conversionRate && _obj.list.length === 0) {
            _obj.text = this.$t('market.flowAnalyIm1', {count: _obj.count, str2: str2, str3: str3})
          } else if ((!_obj.conversionRate) && _obj.list.length !== 0) {
            _obj.text = this.$t('market.flowAnalyIm2', {count: _obj.count, str1: this.$t('market.flow1', {avrage: avrage}), str2: str2})
          } else if ((!_obj.conversionRate) && (_obj.list.length === 0)) {
            _obj.text = this.$t('market.flowAnalyIm3', {count: _obj.count, str2: str2})
          }
        }
        if (this.pvUvSwitch === true) {
          _obj.text = this.$t('market.pvUvSwitchTip')
        }
        this.trafficAnalysis = _obj
      },
      handleInterData (obj) {
        this.handeKeyWord(obj.keywordAnalysis)
        this.handTraffic(obj.trafficAnalysis)
        this.handlePageAn(obj)
        this.handleSess(obj.sessionAnalysis)
      },
      handleSituate (_obj) {
        for (let key in _obj) {
          let _item = {
            currentCount: _obj[key].currentCount,
            compareCount: _obj[key].currentCount - _obj[key].compareCount,
            averageCount: this.time === 'month' ? Math.ceil(_obj[key].averageCount / 30) : Math.ceil(_obj[key].averageCount / 7),
            wapCount: _obj[key].wapCount,
            comparePer: _obj[key].compareCount === 0 ? _obj[key].currentCount === 0 ? parseFloat(0).toFixed(2) : parseFloat(100).toFixed(2) : (parseFloat(((_obj[key].currentCount - _obj[key].compareCount) / _obj[key].compareCount)) * 100).toFixed(2)
          }
          this.situation[key] = _item
        }
      },
      transrHandleRate () {
        let _object = deepClone(this.situation1)
        //  处理对话点击率   (分子， 分母，比较的分子， 比较的分母，均值)
        this.clickRate = this.handleRate({
          currMolecular: _object.effectDialNums.currentCount,
          currDenominator: _object.pv.currentCount,
          compMolecular: _object.effectDialNums.compareCount,
          compDenominator: _object.pv.compareCount,
          avrageMol: _object.effectDialNums.averageCount,
          avrageDen: _object.pv.averageCount
        })
        let _object1 = deepClone(this.situation1)
        //  处理对话转换率   (分子， 分母，比较的分子， 比较的分母，均值)
        this.conversionRate = this.handleRate({
          currMolecular: _object1.effectDialNums.currentCount,
          currDenominator: _object1.uv.currentCount,
          compMolecular: _object1.effectDialNums.compareCount,
          compDenominator: _object1.uv.compareCount,
          avrageMol: _object1.effectDialNums.averageCount,
          avrageDen: _object1.uv.averageCount
        })
        let _object2 = deepClone(this.situation1)
        //  处理对话接通率   (分子， 分母，比较的分子， 比较的分母，均值)
        this.connectedRate = this.handleRate({
          currMolecular: _object2.effectDialNums.currentCount,
          currDenominator: _object2.dialogNums.currentCount,
          compMolecular: _object2.effectDialNums.compareCount,
          compDenominator: _object2.dialogNums.compareCount,
          avrageMol: _object2.effectDialNums.averageCount,
          avrageDen: _object2.dialogNums.averageCount
        })
        let _object3 = deepClone(this.situation1)
        //  处理对话邀请率   (分子， 分母，比较的分子， 比较的分母，均值)
        this.inviteRate = this.handleRate({
          currMolecular: _object3.customerSINums.currentCount,
          currDenominator: _object3.dialogNums.currentCount,
          compMolecular: _object3.customerSINums.compareCount,
          compDenominator: _object3.dialogNums.compareCount,
          avrageMol: _object3.customerSINums.averageCount,
          avrageDen: _object3.dialogNums.averageCount
        })
        let _object4 = deepClone(this.situation1)
        //  处理对话请求率   (分子， 分母，比较的分子， 比较的分母，均值)
        this.requestRate = this.handleRate({
          currMolecular: _object4.visitorICNums.currentCount,
          currDenominator: _object4.dialogNums.currentCount,
          compMolecular: _object4.visitorICNums.compareCount,
          compDenominator: _object4.dialogNums.compareCount,
          avrageMol: _object4.visitorICNums.averageCount,
          avrageDen: _object4.dialogNums.averageCount
        })
      },
      handleRate (_object) {
        let obj = {
          clickRatePer: 0,
          averageCountPer: 0,
          compCountPer: 0,
          avrage: 0
        }
        _object.currMolecular === 0 ? obj.clickRatePer = parseFloat(0).toFixed(2) : _object.currDenominator === 0 ? obj.clickRatePer = parseFloat(100).toFixed(2) : obj.clickRatePer = (parseFloat(_object.currMolecular / _object.currDenominator) * 100).toFixed(2)
        _object.avrageMol === 0 ? obj.avrage = parseFloat(0).toFixed(2) : _object.avrageDen === 0 ? obj.avrage = parseFloat(100).toFixed(2) : obj.avrage = (parseFloat(_object.avrageMol / _object.avrageDen) * 100).toFixed(2)
        let _currPer = 0
        let _comPer = 0
        _object.currMolecular === 0 ? _currPer = 0 : _object.currDenominator === 0 ? _currPer = 100 : _currPer = (parseFloat(_object.currMolecular / _object.currDenominator) * 100).toFixed(2)
        _object.compMolecular === 0 ? _comPer = 0 : _object.compDenominator === 0 ? _comPer = 100 : _comPer = (parseFloat(_object.compMolecular / _object.compDenominator) * 100).toFixed(2)
        this.time === 'month' ? obj.averageCountPer = (obj.avrage / 30).toFixed(2) : obj.averageCountPer = (obj.avrage / 7).toFixed(2)
        obj.compCountPer = (_currPer - _comPer) === 0 ? parseFloat(0).toFixed(2) : _comPer === 0 ? parseFloat(100).toFixed(2) : ((obj.clickRatePer - _comPer) / _comPer).toFixed(2)
        return obj
      }
    },
    beforeMount () {
      this.time = 'today'
      this.filterTime = this.getFormatDateTime(new Date())
      this.$store.dispatch('getCache', {type: 'channelGlobalSet'}).then((resp) => {
        console.log(resp)
        if (resp.uvpvSwitch && resp.uvpvSwitch === 'true') {
          this.pvUvSwitch = false
        } else {
          this.pvUvSwitch = true
        }
        this.initData()
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl";
  .marketing
    background #fff
    font-size 12px
    margin-left 20px
    padding-right 20px
    height calc(100vh - 105px)
    overflow-y auto
    padding-top 25px
    line-height 12px
  .sit-title
    margin-bottom 10px
    color $cf-level1
    .name
      font-size 20px
      line-height 20px
      margin-right 10px
  .inter-title
    margin-bottom 10px
    margin-top 10px
  .spacing
    padding-right 15px
  .margin-b-15
    margin-bottom 15px
  .situation-thir
    margin-bottom 20px
  .inter-box
    border-bottom 1px solid #ccc
  .interp-title
    font-size 14px
    color $cf-gray1
    margin-bottom 10px
    line-height 14px
    font-weight 800
  .interp-content
    font-size 12px
    line-height 18px
    margin-left 15px
  .int-content
    margin-top 45px
  .no-data
    text-align center
    margin-top 15px
  .filter
    margin-bottom 20px
    margin-top 20px
  .refresh
    color $c-main
    float right
    .icon-shuaxin
      margin-top: 7px
      font-size: 20px
      line-height: 20px
      cursor pointer
  .el-dropdown-link
    color $cf-level1
    cursor pointer
  .icon-shaixuan
    margin-right 10px
  .filter-name
    border-bottom 1px solid $cf-level1
    padding-right 50px
  .filter-date
    padding-left 15px
  .excellent
    width: 140px
    height: 140px
    float: left
    .excellent-import
      color $c-pink
      font-size 16px
      text-align center
      font-weight 500
      .text1
        padding-top 22px
      .text2
        padding-top 10px
    .excellent-good
      color $c-main
      font-size 16px
      text-align center
      font-weight 500
      .text1
        padding-top 37px
  .loading
    height: 100vh
  .prompt
    color $c-prompt
    margin-bottom 20px
</style>
